<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input style="width: 240px" v-model="data.author"  placeholder="请输入要搜索的诗人" :prefix-icon="Search"></el-input>
      <el-button type="primary" @click="handleSearch" style="margin-left: 10px">查 询</el-button>
      <el-button type="warning" style="margin-left: 10px">添加</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <div style="margin: 5px">
        <el-table 
          :data="paginatedData" 
          stripe 
          class="scroll-table"
          height="60vh" 
          max-height="600px" 
        >
          <!-- 固定左侧姓名列防止横向滚动时消失 -->
          <el-table-column prop="author" label="姓名" width="120" fixed />
          
          <el-table-column prop="title" label="标题" width="180"/>
          <el-table-column prop="content" label="内容"/>
          
          <!-- 固定右侧操作列 -->
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <el-button type="danger" size="small" @click="handleDelete(scope.row)"> 
                <el-icon><Delete /></el-icon>删除 
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin: 10px; overflow-x: auto;">
        <el-pagination 
            v-model:current-page="data.currentPage" 
            v-model:page-size="data.pageSize" 
            :page-sizes="[5, 10, 15, 20]"
            :total="data.total" 
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
 
<script>
import { reactive, computed } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import axios from "axios";
import { ElMessage } from "element-plus";
 
export default {
  setup() {
    const data = reactive({
      author: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      allData: [] // 存储全部数据用于前端分页 
    });
 
    // 计算当前页显示的数据 
    const paginatedData = computed(() => {
      const start = (data.currentPage  - 1) * data.pageSize; 
      const end = start + data.pageSize; 
      return data.tableData.slice(start,  end);
    });
 
    async function getdata() {
      try {
        const res = await axios.get("http://127.0.0.1:8000/pom/"); 
        const content = res.data.content; 
        data.allData  = [];
        
        for (const poetName in content) {
          if (content.hasOwnProperty(poetName))  {
            content[poetName].forEach(poem => {
              const poemTitle = Object.keys(poem)[0]; 
              data.allData.push({ 
                author: poetName,
                title: poemTitle,
                content: poem[poemTitle]
              });
            });
          }
        }
        
        data.total  = data.allData.length; 
        data.tableData  = [...data.allData];  // 初始化显示全部数据 
      } catch (error) {
        console.error(" 请求失败:", error);
        ElMessage.error(" 数据加载失败");
      }
    }
 
    // 搜索功能 
    function handleSearch() {
      if (!data.author.trim())  {
        data.tableData  = [...data.allData]; 
      } else {
        data.tableData  = data.allData.filter(item  => 
          item.author.includes(data.author.trim()) 
        );
      }
      data.total  = data.tableData.length; 
      data.currentPage  = 1; // 重置到第一页 
    }
 
    // 分页大小变化 
    function handleSizeChange(val) {
      data.pageSize  = val;
    }
 
    // 当前页变化 
    function handleCurrentChange(val) {
      data.currentPage  = val;
    }
 
    // 删除功能 
    function handleDelete(row) {
      // 这里可以添加实际删除逻辑 
      console.log(" 删除:", row);
      ElMessage.success(" 删除成功（演示）");
    }
 
    getdata();
 
    return {
      data,
      paginatedData,
      Search,
      Delete,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      handleDelete 
    };
  }
};
</script>
 
<style scoped>
.card {
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
 
.el-table {
  margin-bottom: 10px;
}
 
.el-pagination {
  justify-content: center;
}
 
/* 响应式调整 */
@media (max-width: 768px) {
  .el-input {
    width: 180px !important;
  }
}

/* 表格滚动样式 */
.scroll-table {
  --el-table-border-color: #ebeef5;
  --el-table-header-bg-color: #f5f7fa;
  
  /* 滚动条美化 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }
  
  /* 内容过长时换行显示 */
  .el-table__body td.el-table__cell  {
    white-space: normal;
    word-break: break-word;
  }
}
</style>